<template>
    <div class="platform">
        <div class="platform-main">
            <div class="item" v-for="item in list" :key="item.code">
                <h3>{{item.city}}</h3>
                <div class="city">
                    <el-link v-for="city in item.children" :key="city.code" :underline="false" @click="detail(city)">
                        <el-tooltip
                                placement="top"
                                effect="light"
                                :content="city.city">
                                <span>{{city.city}}</span>
                            </el-tooltip>
                    </el-link>
                </div>
            </div>
        </div>

        <transition name="el-fade-in-linear">
            <div class="arrow" v-show="arrowShow">
                <div class="left" v-show="leftArrowShow">
                    <el-button type="text" icon="el-icon-arrow-left"  @click="left"></el-button>
                </div>

                <!-- 占位div 勿删 -->
                <div></div>

                <div class="right" v-show="rightArrowShow">
                    <el-button type="text" icon="el-icon-arrow-right" @click="right"></el-button>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import { mapState, mapGetters, } from 'vuex';

export default {
    head: {
    },
    props:{

    },
    components: { 
    },
    data: () => ({
        list:[],
        dialogVisible:false,
        currentCity:{

        },
        arrowShow:false,
        leftArrowShow:false,
        rightArrowShow:true,
        targetData:{},
    }),
    computed: {
        ...mapState({
            cityName: state => state.city.usersCityName,
        }),
        ...mapGetters({
            navigateData: 'navigate/navigateData'
        }),
    },
    watch: {
        cityName: {
            handler(n, o) {
                this.sortCity(n)
            },
            // immediate:true
        },
        navigateData: {
            handler(n, o) {
                this.getData()
            },
            deep:true,
        },
        // model(n) {
        //     if (n) {
        //     }
        // }
        
    },
    methods: {
        getData(){
            this.list = clone(this.navigateData.jyptlist.children) ;
        },
        setWheel(){
            const that = this;
            var tabsContainer = document.querySelector(".platform-main");
            tabsContainer.addEventListener("wheel", (event) => {
                event.preventDefault();
                tabsContainer.scrollLeft += event.deltaY;
            });

            var mainWork = document.querySelector(".platform");
            mainWork.onmouseover = function(){
                that.arrowShow = true;
            }

            mainWork.onmouseout = function(){
                that.arrowShow = false;
            }
        },
        /**
         * 详情
         * @param {Object} item 所点击对象
         */
        detail(item){
            if (!item.url) {
                showMsg('暂无信息');
                return;
            }

            this.currentCity = item;
            this.point(item);
            // 跳转
            window.open(item.url)
        },
        /**
         * 埋点
         */
        point(item){
            this.$ajax({
                type: "post",
                url: `${this.$store.state.api.tbUrl}/home/navigateclick.json`,
                data: {
                    type:item.type,
                    id:item.code
                },
                callback: function (data, res) {},
                error: function () {},
            });
        },
        /**
         * 城市排序
         */
        sortCity(cityname){
            const that = this;
            let List2 = clone(this.list);
            List2.sort((a, b) => {
                return a.city.localeCompare(b.city, 'zh'); //a~z 排序
            });
            for (let i = 0; i < List2.length; i++) {
                if (List2[i].city == cityname) {
                    that.targetData = List2[i];
                    List2.splice(i, 1);
                    break;
                }
            }
           List2.unshift(that.targetData);
           this.list = List2;

            var navItem = document.querySelector(".platform-main");
            navItem.scrollLeft = 0;
            this.leftArrowShow = false;
        },
        left(){
            var navItem = document.querySelector(".platform-main");
            navItem.scrollLeft -= 300;
            if(navItem.scrollLeft == 0){
                this.leftArrowShow = false;
                this.rightArrowShow = true;
            }else{
                this.rightArrowShow = true;
            }
        },
        right(){
            var navItem = document.querySelector(".platform-main");
            navItem.scrollLeft += 300;
            var res = navItem.scrollLeft == (navItem.scrollWidth - navItem.clientWidth) ? true : false;
            if(res){
                this.rightArrowShow = false;
                this.leftArrowShow = true;
            }else{
                this.leftArrowShow = true
            }
        }
    },
    mounted() {
        this.getData();
        this.setWheel();
        this.sortCity(this.cityName);
    },
    beforeDestroy() {

    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss'; 
    .platform {
        position: relative;
        padding: 0 20px;

        .arrow {
                position: absolute;
                width: 100%;
                top: 0px;
                left: 0px;
                display: flex;
                justify-content: space-between;

                ::v-deep .el-button {
                    font-weight: 800;
                    font-size: 20px;
                    padding-top: 10px;
                }

            }

        .platform-main {
            display: flex;
            overflow: auto;
            overflow-x: hidden;

            .item {
                height: 240px;
                // background-color: #ccc;
                border-right: 1px solid #eeeeee;
                margin: 10px;

                &:last-child{
                    border: none;
                }

                h3 {
                    text-align: center;
                }

                .city {
                    height: 210px;
                    margin-top: 12px;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: row;
                    writing-mode: vertical-lr;

                    ::v-deep .el-link {
                        writing-mode: horizontal-tb;
                        line-height: 24px;
                        display: block;
                        width: 67px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                }

            }
        }

       
    }
</style>
 